<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="__PUBLIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__PUBLIC__/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__PUBLIC__/css/animate.min.css" rel="stylesheet">
    <link href="__PUBLIC__/css/style.min.css?v=4.1.0" rel="stylesheet">
    <link href="__PUBLIC__/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="__PUBLIC__/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
</head>
<body>
<div class="tabs-container" style="height:100%;width:100%">
    <ul class="nav nav-tabs">
        <li class="active" id="new"><a data-toggle="tab" href="#tab-1" aria-expanded="true">成绩列表</a>
        </li>
        <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="true" id="grape">成绩可视化</a>
        </li>
    </ul>
    <div class="tab-content" style="height:100%;width:100%">
        <div id="tab-1" class="tab-pane active">
            <div class="ibox-content">
                <div class="input-group col-md-2">
                    <span class="input-group-addon"> 学年</span>
                    <input type="text" class="form-control  datepicker" id="year" value="">
                </div>
                <div class="input-group col-md-2">
                    <span class="input-group-addon"> 学期</span>
                    <select class="form-control" id="term">
                        <option value="0">请选择</option>
                        <option value="1">第一学期</option>
                        <option value="2">第二学期</option>
                    </select>
                </div>

                <!-- Example Events -->
                <div class="example-wrap">
                    <div class="example">
                        <div class="btn-group" id="exampleTableEventsToolbar" role="group">
                            <button type="button" id="insert" class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-export" aria-hidden="true"></i>
                                对接教务系统
                            </button>
                        </div>
                        <table  id="userlist"
                                data-height="400"
                                data-mobile-responsive="true">
                            <thead>
                            <tr>
                                <th data-field="courseName">课程名称</th>
                                <th data-field="score">分数</th>
                                <th data-field="year">学年</th>
                                <th data-field="term">学期</th>
                                <th data-field="gpa">绩点</th>
                                <th data-field="credit">学分</th>
                                <th data-field="order">排名</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div id="tab-2" class="tab-pane" style="height:100%;width:100%">
            <div id="main" style="height:100%;width:100%"></div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="__PUBLIC__/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__PUBLIC__/js/layui/layui.all.js"></script>
<script src="__PUBLIC__/js/vue.js"></script>
<script src="__PUBLIC__/js/vue-resource.js"></script>
<script src="__PUBLIC__/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="__PUBLIC__/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="__PUBLIC__/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="__PUBLIC__/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="__PUBLIC__/js/layui/layui.all.js"></script>
<script src="__PUBLIC__/js/plugins/echarts/echarts.min.js"></script>
<script src="__PUBLIC__/js/score.js"></script>
</body>
</html>
